<!--
  - TFjs初始化组件
 -->

<!-- 视图层 -->
<template>

<!-- TFjs初始化：卡片容器 -->
<uni-card title="TensorFlow.js初始化">
  <!-- 通告栏 -->
  <uni-notice-bar text=
    "用于启动GPU硬件加速的TensorFlow.js计算环境。"
  />
  <!-- 内容容器 -->
  <view>
    <!-- 条件渲染：若TensorFlow初始化成功 -->
    <text
      v-if="tfBackendRef"
      space="ensp"
    >
      TensorFlow初始化成功，加速引擎为：
      {{
        tfBackendRef === "webgpu" ? "WebGPU" : "WebGL \n 注：部分浏览器不支持WebGPU引擎，则会以WebGL引擎作为备选。WebGL虽然性能比WebGPU差，但是作为演示也足已满足需求。"
      }}
    </text>
    <!-- 条件渲染：若TensorFlow仍然在初始化中 -->
    <text
      v-else
      space="ensp"
    >
      正在初始化TensorFlow.js计算环境，请稍候...
    </text>
  </view>
</uni-card>
  
</template>

<!-- 逻辑层 -->
<script setup>
// 导入tfjs库
import * as tf from "@tensorflow/tfjs"
// 导入tfjs的WebGPU库
import "@tensorflow/tfjs-backend-webgpu"
// 导入vue的onMounted方法
import { onMounted } from "vue"
// 导入全局状态变量tfBackendRef
import { tfBackendRef } from "../../scripts/app_common.js"

/**
 * @启动方法
 * 生命周期钩子，组件加载完毕后执行
 */
onMounted(async () => {
  // 初始化TF计算服务(后端)
  await initTfBackend()
  // 把后台传给tfBackend
  tfBackendRef.value = tf.getBackend()
})

/**
 * @TF计算环境初始化
 * 目前仅涉及一步，即开启WebGL加速
 */
async function initTfBackend() { try {
  // 等待计算服务(后端)全部初始化完毕
  await tf.ready()
  // 计算服务(后端)初始化。有预设项则读取预设；无预设项则指定最优
  tf.backend()
  return
} catch (error) {
  console.error("TF计算环境初始化时报错：", error)
}}

</script>